<script>
import {deleteBook, getBookDataList} from "@/utils";

export default {
  name: "HomePage.vue",
  data() {
    return {
      bookList: [
        {
          id: 1,
          bookName: '三国演义',
          author: '罗贯中',
          number: 1,
          press: '新华社出版社',
        },
        {
          id: 2,
          bookName: '水浒传',
          author: '施耐庵',
          number: 2,
          press: '新华社出版社',
        },
        {
          id: 3,
          bookName: '西游记',
          author: '吴承恩',
          number: 3,
          press: '新华社出版社',
        },
        {
          id: 4,
          bookName: '红楼梦',
          author: '曹雪芹',
          number: 4,
          press: '新华社出版社',
        },
      ],
    }
  },
  methods: {
    deleteBook(bookId) {
      console.log(bookId)
      if (confirm("请确认是否删除")) {
        deleteBook(bookId)
        this.bookList = getBookDataList()
      } else {
        console.log("取消了删除")
      }
    }
  },
  mounted() {
    // 如果本地没有存储数据则初始化数据
    let trueData = getBookDataList()
    // if (trueData.length === 0) {
    //   localStorage.setItem('localBookData', JSON.stringify(this.bookList));
    // } else {
    this.bookList = trueData
    // }
  }
}
</script>

<template>
  <div class="container">
    <table>
      <thead>
      <tr>
        <td>ID</td>
        <td>书名</td>
        <td>作者</td>
        <td>编号</td>
        <td>出版社</td>
        <td>操作</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in bookList" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.bookName }}</td>
        <td>{{ item.author }}</td>
        <td>{{ item.number }}</td>
        <td>{{ item.press }}</td>
        <td>
          <router-link :to="{name: 'editBook', params: {bookItem: item}}" tag="button">编辑</router-link>
          |
          <button @click="deleteBook(item.id)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <router-link :to="{name: 'addBook'}" tag="button">添加书籍</router-link>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

table {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid black; /* 设置边框样式 */
  margin-bottom: 10px; /* 添加一些间距 */
}

th, td {
  border: 1px solid black; /* 设置单元格边框 */
  padding: 8px; /* 添加一些内边距 */
}
</style>